<template>
	<div class='page-account'>
		<section class="account-main">
			<h2 class="title">
				<img
					class="brand-icon"
					src="@/assets/store.svg" alt="">
				<span>便利店 · 在线</span>
			</h2>
			<router-view/>
		</section>
	</div>
</template>

<script>
  /**
   *
   *
   *
   */
  export default {
    name: "index"
  }
</script>

<style lang='less'>
	.page-account {
		flex-grow: 1;
		width: 100%;
		min-height: 100%;
		height: 100%;
		overflow: auto;
		padding: 100px 0;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		.account-main {
			width: 368px;
			min-height: 100%;
			box-sizing: border-box;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.title {
				text-align: center;
				padding-bottom: 16px;
				color: #222;
				position: relative;
			}

			.brand-icon {
				height: 60px;
				position: absolute;
				left: 0;
				top: -20px;
				transform: rotate(-30deg);
				transform-origin: 50% 0 0;
				animation: brandIcon 12s infinite;
				animation-timing-function: ease-in-out;
				animation-direction: alternate;
			}
		}

		.el-form-item {
			margin-bottom: 0;

			& + .el-form-item {
				margin-top: 24px;
			}
		}
	}

	@keyframes brandIcon {
		0% {
			transform: rotate(25deg);
		}
		25% {
			transform: rotate(-15deg);
		}
		50% {
			transform: rotate(15deg);
		}
		75% {
			transform: rotate(-25deg);
		}
		100% {
			transform: rotate(15deg);
		}

	}
</style>
